;
(() => {
    //#region lib

    //#region color
    const ONE_SIXTH = 1 / 6;
    const ONE_THIRD = 1 / 3;
    const TWO_THIRDS = 2 / 3;
    const hue2rgb = (p, q, t) => {
        if (t < 0) {
            t += 1;
        }
        if (t > 1) {
            t -= 1;
        }
        if (t < ONE_SIXTH) {
            return p + (q - p) * 6 * t;
        }
        if (t < 0.5) {
            return q;
        }
        if (t < TWO_THIRDS) {
            return p + (q - p) * (TWO_THIRDS - t) * 6;
        }
        return p;
    };

    const hsl2rgb = (h, s, l) => {
        if (s === 0) {
            return new Array(3).fill(l);
        }
        const q =
            l < 0.5 ?
                l * s + l :
                l + s - l * s;
        const p = 2 * l - q;
        return [
            255 * hue2rgb(p, q, h + ONE_THIRD),
            255 * hue2rgb(p, q, h),
            255 * hue2rgb(p, q, h - ONE_THIRD),
        ];
    }
    //#endregion

    //#region fullscreen
    //进入全屏
    function requestFullScreen() {
        var de = document.documentElement;
        if (de.requestFullscreen) {
            de.requestFullscreen();
        } else if (de.mozRequestFullScreen) {
            de.mozRequestFullScreen();
        } else if (de.webkitRequestFullScreen) {
            de.webkitRequestFullScreen();
        }
    }
    //退出全屏
    function exitFullscreen() {
        var de = document;
        if (de.exitFullscreen) {
            de.exitFullscreen();
        } else if (de.mozCancelFullScreen) {
            de.mozCancelFullScreen();
        } else if (de.webkitCancelFullScreen) {
            de.webkitCancelFullScreen();
        }
    }
    //#endregion

    //#endregion

    //#region logic
    let updatehandle
    let intervalhandle
    const duration = 30000
    const container = document.getElementById('content')
    const link = document.getElementById('link')
    const processbar = document.getElementById('processbar')
    const action = document.getElementById('action')
    const fullscreenButton = document.getElementById('full-screen-button')
    let timer = 0
    const interval = 1000
    let isFullScreen = false

    function updateProcessBar() {
        const percentage = timer / (duration - interval)
        if (percentage < 1) {
            processbar.style.transition = 'all 200ms'
        }
        if (percentage === 1) {
            processbar.style.transition = 'none'
        }
        processbar.style.width = parseInt(percentage * 100) + '%'
        if (timer > 0) timer = Math.max(0, timer - interval)
    }

    function updateText() {
        const xhr = new XMLHttpRequest()
        xhr.open('get', 'https://v1.hitokoto.cn')
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                const data = JSON.parse(xhr.responseText)
                container.innerText = data.hitokoto
                link.href = 'https://hitokoto.cn/?uuid=' + data.uuid
                link.innerText = '—— ' + data.from
            }
        }
        xhr.send();

        const H = Math.random()
        const S = 0.5
        const L = 0.5
        const [R, G, B] = hsl2rgb(H, S, L)
        console.log(H, S, L)
        console.log(R, G, B)
        document.body.style.backgroundColor = `rgba(${R},${G},${B},1)`
    }

    function updateAll() {
        timer = duration - interval
        updateProcessBar()
        updateText()
        if (intervalhandle) window.clearInterval(intervalhandle)
        intervalhandle = window.setInterval(updateProcessBar, interval)
    }

    function onNext() {
        updateAll()
        if (updatehandle) window.clearInterval(updatehandle)
        updatehandle = window.setInterval(updateAll, duration)
    }
    onNext()
    action.addEventListener('click', onNext)
    fullscreenButton.addEventListener('click', _ => {
        if (!isFullScreen) {
            requestFullScreen()
        } else {
            exitFullscreen()
        }
    })
    document.addEventListener('fullscreenchange',e=>{
        if(document.fullscreenElement){
            fullscreenButton.classList.add('fullscreen')
            isFullScreen = true
        }else{
            fullscreenButton.classList.remove('fullscreen')
            isFullScreen = false
        }
    })
    //#endregion
})();